<template>
  <a-layout class="layout" :class="`theme${uniqueInfo.theme}`">
    <side-menu class="sider" @menuSelect="myMenuSelect" :menus="menus" :collapsed="collapsed" :collapsible="true">
    </side-menu>
    <a-layout>
      <head-info @sliderToggle="toggle"></head-info>
      <a-layout-content :style="{ height: '100%', position: 'relative', background: '#E7ECF1' }">
        <slot></slot>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import SideMenu from '@/components/menu/SideMenu'
import HeadInfo from '@/components/tools/HeadInfo'
import { mapGetters } from 'vuex'
export default {
  name: 'GlobalLayout',
  components: {
    SideMenu,
    HeadInfo
  },
  data () {
    return {
      collapsed: false,
      activeMenu: {},
      menus: []
    }
  },
  created () {
    this.menus = this.permissionList
  },
  computed: {
    ...mapGetters(['uniqueInfo', 'permissionList'])
  },
  methods: {
    toggle () {
      this.collapsed = !this.collapsed
    },
    myMenuSelect (value) {
      this.$router.push('/' + value.key)
    }
  }
}
</script>

<style lang="less">
body {
  &.colorWeak {
    filter: invert(80%);
  }
}

.layout {
  height: 100%;

  &.ant-layout-has-sider {
    flex-direction: row;
  }

  // 内容区
  .layout-content {
    margin: 24px 24px 0px;
    height: 64px;
    padding: 0 12px 0 0;
  }
}

// 菜单样式
.sider {
  box-shadow: 2px 10px 12px 0 rgba(0, 21, 41, 0.3);
  position: relative;
  z-index: 10;

  .logo {
    // height: 64px;
    position: relative;
    // line-height: 64px;
    padding-left: 20px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    // overflow: hidden;

    img,
    h1 {
      display: inline-block;
      vertical-align: middle;
    }

    img {
      height: 44px;
    }

    h1 {
      color: #fff;
      font-size: 18px;
      margin: 0 0 0 8px;
      font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol';
      font-weight: 600;
    }
  }
}

.table-page-search-wrapper {
  .ant-form-inline {
    .ant-form-item {
      display: flex;
      margin-bottom: 24px;
      margin-right: 0;

      .ant-form-item-control-wrapper {
        flex: 1 1;
        display: inline-block;
        vertical-align: middle;
      }

      >.ant-form-item-label {
        line-height: 32px;
        padding-right: 8px;
        width: auto;
      }

      .ant-form-item-control {
        height: 32px;
        line-height: 32px;
      }
    }
  }

  .table-page-search-submitButtons {
    display: block;
    margin-bottom: 24px;
    white-space: nowrap;
  }
}
</style>
